<template>
  <view class="dataTable">
    <u-toast ref="uToast" />
    <view class="dataTable-canvas">
      <view class="dataTable-canvas-title">
        <text>
          今年销售单统计
        </text>
      </view>
      <canvas id="myEcharts"></canvas>
    </view>
	<u-toast ref="uToast" />
	<view class="dataTable-canvas">
	  <view class="dataTable-canvas-title">
	    <text>
	      本月商品销售统计
	    </text>
	  </view>
	  <canvas id="histogram"></canvas>
	</view>
  </view>
 
</template>
<script>
// 将npm方式下载的echarts插件引入进来
// import * as echarts from 'echarts';
// import * as echarts from '@/common/echarts.min.js';
 
export default {
  data() {
    return {
      // 这里初始化一个null，待会儿用来充当echarts实例
      myChart: null,
      histogram: null,
    }
  },
  onLoad(options) {
    let that = this;
    // 通过nextTick异步画图
    this.$nextTick(() => {
      that.drawLines();
	  that.histogramLines();
    });
	
  },
  beforeDestroy() {
    // 页面关闭时销毁echarts实例
    this.myChart.clear();
    this.myChart.dispose();
	this.histogram.clear();
    this.histogram.dispose();
  },
  methods: {
    async drawLines() {
      // 这里是初始化的方式，通过id查询找到你的canvas标签
      this.myChart = echarts.init(document.getElementById('myEcharts'));
      // 这里我初始化了4个数组用来存放 后端接口给我的数据
      // 这里开始就是echarts的配置项了
      let option = {
        // x轴数据 
        xAxis: {
          type: 'category',
          data:  ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        },
        // y轴数据
        yAxis: {
          type: 'value',
        },
        // 这里写2个对象是2条线条，3个则是3条
        series: [
          {
            // data使用刚才定义的数组，数据从后端接口中取得
            data:   [5, 20, 36, 10, 10, 20],
            type: 'line',
            smooth: true,
          },
        ],
        grid: {
          // 这里可以防止Y轴显示不全
          containLabel: true
        }
      }
 
      // 这里不要忘记把option设置给echarts实例
      this.myChart.setOption(option);
 
      // 这里是用于窗口变化时的自适应，利用的是echarts自带的resize方法
      // 如果你打印出来这个echarts实例，可以在函数里面找到这个方法
      window.addEventListener('resize', () => {
        this.myChart.resize()
      });
    },
	async histogramLines() {
	  // 这里是初始化的方式，通过id查询找到你的canvas标签
	  this.histogram = echarts.init(document.getElementById('histogram'));
	  // 这里我初始化了4个数组用来存放 后端接口给我的数据
	  // 这里开始就是echarts的配置项了
	  let option = {
			  tooltip: {
				trigger: 'axis',
				axisPointer: {
				  type: 'shadow'
				}
			  },
			  grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			  },
			  xAxis: [
				{
				  type: 'category',
				  data: ['红木板', '石材', '石英扳', '石灰岩', '钢扳', '铁扳'],
				  axisTick: {
					alignWithLabel: true
				  }
				}
			  ],
			  yAxis: [
				{
				  type: 'value'
				}
			  ],
			  series: [
				{
				  name: 'Direct',
				  type: 'bar',
				  barWidth: '100%',
				  data: [10, 52, 200, 334, 390, 330, 220]
				}
			  ]
			};
				 
	  // 这里不要忘记把option设置给echarts实例
	  this.histogram.setOption(option);
	 
	  // 这里是用于窗口变化时的自适应，利用的是echarts自带的resize方法
	  // 如果你打印出来这个echarts实例，可以在函数里面找到这个方法
	  window.addEventListener('resize', () => {
	    this.histogram.resize()
	  });
	},
  },
}
</script>
<style scope lang="scss">
.dataTable{
  padding: 10rpx;
  width: 100%;
  height: 100%;
  &-canvas {
    &-title {
      padding: 20rpx 0rpx;
      > text {
        padding-left: 20rpx;
        width: 100%;
        height: 100%;
        font-size: 32rpx;
        font-weight: 550;
        line-height: 32rpx;
        border-left: 10rpx solid #28b5b1;
      }
    }
    #myEcharts {
      width: 100%;
      height: 600rpx;
    }
	#histogram {
	  width: 100%;
	  height: 600rpx;
	}
  }
}
</style>